<template>
	<view class="chat-container">
		<view class="message-list">
			<chat-message v-for="message in messages" :message="message" :key="message.id" />
		</view>
		<view class="input-box">
			<view class="input-box-item">
				<input type="text" v-model="newMessage" placeholder="请输入消息"  @confirm="keyEnt"/>
				<button class="btn" @click="sendMessage">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import ChatMessage from '@/components/chat/ChatMessage.vue'

	export default {
		components: {
			ChatMessage
		},
		data() {
			return {
				messages: [{
						id: 1,
						content: '你好，有什么可以帮助您的吗？',
						sender: 'customer_service',
						time: '2023-04-03 10:00:00',
						avatar:'../../static/image/头像.jpg'
					},
					{
						id: 2,
						content: '你好，我想问一下产品的价格。',
						sender: 'customer',
						time: '2023-04-03 10:01:00',
						avatar:'../../static/image/头像.jpg'
					},
					{
						id: 3,
						content: '产品的价格是100元。',
						sender: 'customer_service',
						time: '2023-04-03 10:02:00',
						avatar:'../../static/image/头像.jpg'
					}
				],
				newMessage: ''
			}
		},
		methods: {
			keyEnt(){
				this.sendMessage()
			},
			sendMessage() {
				const message = {
					id: this.messages.length + 1,
					content: this.newMessage,
					sender: 'customer',
					time: new Date().toLocaleString(),
					avatar:'../../static/image/头像.jpg'
				}
				if(this.newMessage == ''){
					uni.showToast({
						title:"发送消息不能为空哦",
						icon:"none"
					})
				}else{
					this.messages.push(message)
				}
				this.newMessage = ''
			}
		}
	}
</script>

<style>
	.chat-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.message-list {
		flex: 1;
		overflow-y: auto;
	}
	.btn{
		width: 140rpx;
		height: 80rpx;
		background-color: #42B7FB;
	}

	.input-box {
		width: 100%;
		position: fixed;
		bottom: 0%;
		left: 0%;
		padding: 10rpx;
		background-color: #f5f5f5;
	}

	input[type="text"] {
		flex: 1;
		height: 30rpx;
		margin-right: 10rpx;
		border: none;
		outline: none;
	}

	.input-box-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>